<!--页面主要内容-->
<main class="lyear-layout-content">

    <div class="container-fluid">

        <div class="row">
            <div class="col-sm-6 col-lg-3">
                <div class="card bg-primary">
                    <div class="card-body clearfix">
                        <div class="pull-right">
                            <p class="h6 text-white m-t-0">订单量</p>
                            <p class="h3 text-white m-b-0 fa-1-5x">{$OrderCount}</p>
                        </div>
                        <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i
                    class="mdi mdi-currency-cny fa-1-5x"></i></span> </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-6 col-lg-3">
                <div class="card bg-danger">
                    <div class="card-body clearfix">
                        <div class="pull-right">
                            <p class="h6 text-white m-t-0">用户总数</p>
                            <p class="h3 text-white m-b-0 fa-1-5x">{$UserCount}</p>
                        </div>
                        <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i
                    class="mdi mdi-account fa-1-5x"></i></span> </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-6 col-lg-3">
                <div class="card bg-success">
                    <div class="card-body clearfix">
                        <div class="pull-right">
                            <p class="h6 text-white m-t-0">帖子总数</p>
                            <p class="h3 text-white m-b-0 fa-1-5x">{$PostCount}</p>
                        </div>
                        <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i
                    class="mdi mdi-arrow-down-bold fa-1-5x"></i></span> </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-6 col-lg-3">
                <div class="card bg-purple">
                    <div class="card-body clearfix">
                        <div class="pull-right">
                            <p class="h6 text-white m-t-0">充值金额</p>
                            <p class="h3 text-white m-b-0 fa-1-5x">{$PayCount}</p>
                        </div>
                        <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i
                    class="mdi mdi-comment-outline fa-1-5x"></i></span> </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">

            <div class="col-lg-12">
                <div class="card" style="padding: 20px 20px 0;">
                    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM元素 -->
                    <!-- 按分类统计帖子 -->
                    <div id="cate" style="width: 100%;height:700px;"></div>
                </div>

            </div>

        </div>
    </div>

</main>
<!--End 页面主要内容-->
<script src="/static/admin/js/echarts.min.js"></script>
<script>
    var catelist = `{$CateList}`;
    // 把json转成js数组
    catelist = JSON.parse(catelist);

    var AcceptList = `{$AcceptList}`;
    AcceptList = JSON.parse(AcceptList);


    var NotAcceptList = `{$NotAcceptList}`;
    NotAcceptList = JSON.parse(NotAcceptList);
    console.log(NotAcceptList);

    // 基于准备好的dom，初始化echarts实例
    var CateCharts = echarts.init(document.getElementById('cate'));

    // 指定图表的配置项和数据
    var option = {
        // 标题
        title: {
            text: '按分类统计帖子',
            textAlign: 'left'
        },

        //提示框组件
        tooltip: {
            trigger: 'axis', //触发类型
            axisPointer: {
                type: 'shadow' //设置显示为阴影
            }
        },

        // 图例单元组件
        legend: {},

        //设置网格
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true, //自动设置坐标轴位置
        },

        // X轴
        xAxis: {
            type: 'value', //数值轴
            boundaryGap: [0, 0.01]
        },
        // Y轴
        yAxis: {
            type: 'category',
            data: catelist
        },

        //数据结构
        series: [{
            name: '未采纳',
            type: 'bar',
            data: NotAcceptList
        }, {
            name: '已采纳',
            type: 'bar',
            data: AcceptList
        }]
    }

    // 使用刚指定的配置项和数据显示图表。
    CateCharts.setOption(option)
</script>